<template>
    <div class="subscription-page">
        <h2>{{ $t('Account.Subscription.Title') }}</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <h3>{{ $t('Account.Subscription.Stats.TotalPoints') }}</h3>
                <div class="value">
                    {{ totalPoints }}
                    <span>.00</span>
                </div>
                <div class="label">{{ $t('Account.Subscription.Stats.TotalPoints') }}</div>
            </div>
            <div class="stat-card">
                <h3>{{ $t('Account.Subscription.Stats.SubscriptionPoints') }}</h3>
                <div class="value">
                    {{ subscriptionPoints }}
                    <span>.00</span>
                </div>
                <div class="label">{{ $t('Account.Subscription.Stats.SubscriptionPoints') }}</div>
            </div>
            <div class="stat-card">
                <h3>{{ $t('Account.Subscription.Stats.PayPerUsePoints') }}</h3>
                <div class="value">
                    {{ payPerUsePoints }}
                    <span>.00</span>
                </div>
                <div class="label">{{ $t('Account.Subscription.Stats.PayPerUsePoints') }}</div>
            </div>
            <div class="stat-card">
                <h3>{{ $t('Account.Subscription.Stats.FreeCredits') }}</h3>
                <div class="value">
                    {{ freeCredits }}
                    <span>.00</span>
                </div>
                <div class="label">{{ $t('Account.Subscription.Stats.FreeCredits') }}</div>
            </div>
        </div>

        <div class="points-section">
            <h3>{{ $t('Account.Subscription.PlansAndPoints') }}</h3>
            <div class="points-actions">
                <div class="action-card">
                    <h4>{{ $t('Account.Subscription.Stats.SubscriptionPoints') }}</h4>
                    <div class="current-points">{{ $t('Account.Subscription.Stats.CurrentPoints') }}: {{ subscriptionPoints }}</div>
                    <button class="action-btn" @click="router.push('/price')">{{ $t('Account.Subscription.Actions.StartSubscription') }}</button>
                </div>
                <div class="action-card">
                    <h4>{{ $t('Account.Subscription.Stats.PayPerUsePoints') }}</h4>
                    <div class="current-points">{{ $t('Account.Subscription.Stats.CurrentPoints') }}: {{ payPerUsePoints }}</div>
                    <button class="action-btn" @click="router.push('/price')">{{ $t('Account.Subscription.Actions.BuyPoints') }}</button>
                </div>
            </div>
        </div>

        <div class="history-section">
            <div class="table-header">
                <div class="header-cell">{{ $t('Account.Subscription.History.PackageName') }}</div>
                <div class="header-cell">{{ $t('Account.Subscription.History.PurchaseTime') }}</div>
                <div class="header-cell">{{ $t('Account.Subscription.History.CurrentStatus') }}</div>
                <div class="header-cell">{{ $t('Account.Subscription.History.TotalPoints') }}</div>
            </div>
            <div v-for="item in historyList" :key="item.id" class="table-row">
                <div class="cell">{{ item.pointsTYpe == 1 ? $t('Account.Subscription.History.Types.Subscription') : $t('Account.Subscription.History.Types.PayPerUse') }}</div>
                <div class="cell">{{ item.eventTime }}</div>
                <div class="cell">
                    <span :class="['status', item.status == 1 ? 'active' : 'expired']">
                        {{ item.status == 1 ? $t('Account.Subscription.History.Status.Active') : $t('Account.Subscription.History.Status.Expired') }}
                    </span>
                </div>
                <div class="cell">{{ item.points }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getOrderListApi, getMyJifenApi } from '@/api/payment'

const { t } = useI18n()
const router = useRouter()
const totalPoints = ref(0)
const subscriptionPoints = ref(0)
const payPerUsePoints = ref(0)
const freeCredits = ref(0)
const historyList = ref([])

/** 订单列表 */
const getOrderList = async () => {
    const res = await getOrderListApi()  // 0:单次付费 1;订阅
    res.data.forEach(item => {
        item.status = 1
    })
    historyList.value = res.data
}

/** 我的积分 */
const getMyJifen = async () => {
    const res = await getMyJifenApi()
    if (res.code == 200) {
        res.data.forEach(item => {
            totalPoints.value += item.pointsNum
            if(item.pointsType == 1){
                subscriptionPoints.value += item.pointsNum
            } else if (item.pointsType == 2) {
                freeCredits.value += item.pointsNum
            } else if (item.pointsType == 0) {
                payPerUsePoints.value += item.pointsNum
            }
        })
    }
}

onMounted(() => {
    getOrderList()
    getMyJifen()
})
</script>

<style lang="scss" scoped>
.subscription-page {
    color: #333;
    h2 {
        font-size: 24px;
        margin-bottom: 24px;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    h3 {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
    }

    .value {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;

        span {
            font-size: 16px;
            color: #666;
        }
    }

    .label {
        font-size: 14px;
        color: #666;
    }
}

.points-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 40px;

    h3 {
        font-size: 18px;
        margin-bottom: 20px;
    }
}

.points-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.action-card {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;

    h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .current-points {
        color: #666;
        margin-bottom: 16px;
    }

    .action-btn {
        width: 100%;
        padding: 12px;
        background: #1a73e8;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
            background: #1557b0;
        }
    }
}

.history-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.table-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #f8f9fa;
    padding: 16px;
    font-weight: 500;
}

.table-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 16px;
    border-bottom: 1px solid #eee;

    &:last-child {
        border-bottom: none;
    }
}

.status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;

    &.active {
        background: #e6f4ea;
        color: #1e8e3e;
    }

    &.expired {
        background: #fce8e6;
        color: #d93025;
    }
}
</style>
